<template>
  <div class="hello">
    <h2>排序</h2>
    <br >
    <li v-for="item in sortItems" :key="item">
      {{ item }}
    </li>
    <h2>对象循环输出</h2>
    <li v-for="student in students" :key="student">
      {{ student.name }} - {{ student.age }}
    </li>
    <h2>v-text & v-html</h2>
    <span>{{ message }}</span>
    <span v-text="message"></span><br >
    <span v-html="msgHtml"></span>
    <span v-text="msgHtml"></span>

    <button @focus="doThis">测试点击</button>
  </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {

            items: [20, 23, 18, 65, 32, 19, 54, 56, 41],
            students: [
                { name: 'zcc', age: 30 },
                { name: 'Panda', age: 30 },
                { name: 'PanPaN', age: 21 },
                { name: 'King', age: 45 }
            ],
            message: 'hello Vue!',
            msgHtml: '<h5>hello Vue!</h5>'
        }
    },
    computed: {
        sortItems: function() {
            return this.items.sort(this.sortNumber)
        }
    },
    methods: {
        sortNumber(a, b) {
            return a - b
        },
        doThis() {
            alert('触发点击事件')
        },
        doblur() {
            alert('进入焦点')
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
